header{
    display: grid;
    grid-template-rows: repeat(2,1fr);
 
    .search{
        display: grid;
        grid-template-columns: 30px auto 20px;
        align-items: center;
        gap: 15px;
        padding:5px 15px ;
        .input{
            display: grid;
            grid-template-columns: 25px auto;
            border: solid 1px #ddd;
            padding: 6px;
            background-color: white;
            i{
                justify-self: center;
                color: #dad6d6;
                font-size: 18px;
            }
            input{
                border: none;
                outline: none; 
               font-size: 16px;
            }
        }
        .user{
           display: grid;
           justify-self: center;
           i{
               font-size: 22px;
               color: #a6a9a6;
           }
        }
    }
    nav{
        display: grid;
        grid-template-columns: auto 20px;
        padding:5px 8px 5px 15px;
        .links{
            display: grid;
            grid-template-columns: repeat(6,1fr);
            align-items: center;
            a{
                text-decoration: none;
                color:#8c8c8c ;
                font-size: 15px;
                position: relative;
                &.active{
                    color: #FF6D03;
                    &::after{
                        content: ' ';
                        display: block;
                        height: 2px;
                        width: 30px;
                        background-color: #FF6D03;
                        position: absolute;
                        bottom: -6px;
                    }
                }
            }
        }
        label{
                display: grid;
                justify-self: center;
                i{
                    font-size: 28px !important;
                    color: #dad6d6;
                }
        }
        

    }
}